<%--
  Created by IntelliJ IDEA.
  User: LENOVO
  Date: 2023/9/18
  Time: 20:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>管理员登录 - 蟹堡王后台</title>
    <link rel="icon" href="./static/favicon.ico">
    <link rel="stylesheet" href="./static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./static/admin/css/login.css">
    <script src="./static/js/vue.min.js"></script>
    <script src="./static/js/jquery-3.3.1.min.js"></script>
    <script src="./static/bootstrap/js/bootstrap.bundle.js"></script>
    <style>
        body {
            background-color: #f2f2f2; /* 设置背景颜色 */
            background-image: url("images/1.jpg"); /* 设置背景图像的 URL */
            background-repeat: no-repeat; /* 背景图像不重复 */
            background-position: center center; /* 背景图像水平和垂直居中对齐 */
            background-attachment: fixed; /* 固定背景图像不随页面滚动而移动 */
            background-size: cover; /* 自动缩放背景图像以填充整个页面 */
        }
    </style>
</head>
<body>
<div class="login">
    <form  action="${pageContext.request.contextPath}/LoginServlet" method="post">
        <h2>蟹堡王后台登录</h2>
<%--        <% if (request.getAttribute("errorMessage") != null) { %>--%>
        <p style="color: red;" id="msg"></p>
<%--        <% } %>--%>
        <div class="form-group">
            <label>用户名</label>
            <input type="text" v-model="username" name="username" class="form-control form-control-lg">
        </div>
        <div class="form-group">
            <label>密码</label>
            <input type="password" v-model="password" name="password" class="form-control form-control-lg" id="pwd">
        </div>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1" name="rememberMe">
            <label class="form-check-label" for="exampleCheck1">记住密码</label>
            <a href="wjmm.jsp">忘记密码</a>
        </div>

        <button type="button" :disabled="loading" @click="login" class="btn btn-primary btn-lg  btn-block">
            <span v-show="loading" class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
            立即登录
        </button>
    </form>
</div>
<script>
    new Vue({
        el: '.login',
        data: {
            loading: false, // 锁
            username: '',
            password: '',
        },
        methods: {
            login: function() {
                this.loading = true;
                // 登录逻辑自个写哈
                $.getJSON('${pageContext.request.contextPath}/LoginServlet',{
                    username:this.username,
                    password:this.password,
                    "rememberMe":$("#exampleCheck1")[0].checked,
                    // _token:'{{csrf_token()}}'
                },res=>{
                    this.loading = false;
                    if(res.state==1){
                        // $.cookie("tokenStr", res.tokenStr, { expires: 365 });
                        window.location.href = '${pageContext.request.contextPath}/LoginSuccessServlet?tokenStr='+res.tokenStr;
                    }else{
                        $("#msg").html("用户名或密码错误！");
                    }
                })
                // setTimeout(() => {
                //     window.location.href = 'index.html';
                // }, 3000);
            },
        },
    });
</script>
</body>
</html>

